<template>
  <div>
  
     <div :key="sy" class="aa" v-for="(sj,sy) in dx">
        <router-link :to="{path:'/article',query:{_id:sj._id,}}">
    <div v-if="sj.imageSrc.length===1">
      <div class="fdd">
        <div class="bt">{{sj.title}}</div> 
        <div v-for="(sjj,sy) in sj.imageSrc" :key="sy">
          <img class="tp" :src="sjj|imggl" v-lazy="sjj" />
        </div>
        </div>
        <div class="zz">
          <div class="zzz">作者:{{sj.author}}</div><div class="pl">评论:{{sj.comment}}</div><div>发布日期：{{sj.create_time}}</div>
          <!-- <div v-show="showxs" style="margin: 0 0 0 20px;">删除</div> -->
        
        </div>
     </div>
      <div v-else>
      <div>
        <div class="tit">{{sj.title}}</div> 
        <div class="tpd">
        <div v-for="(sjj,sy) in sj.imageSrc" :key="sy">
          <img class="tpp" :src="sjj" v-lazy="sjj" />
        </div>
        </div>
        </div>
        <div class="zz">
          <div class="zzz">作者:{{sj.author}}</div><div class="pl">评论:{{sj.comment}}</div><div>发布日期：{{sj.create_time}}</div>
         
        </div>
     </div>
        </router-link>
        <div class="sc" @click="sc(sj._id,sj.author_id)" v-show="showxs" style="margin: 20px 20px 0 20px;">删除</div>
  </div>
 
  </div>
</template>

<script>
import config from '@/config'
import {timeForm} from '@/gj/timeform'
import {scfb} from '@/api/scfb'
export default {
  props:{
    dx:{
        type:Array,
        default:()=>[],
        
    },
    showxs:{
      default:false
    }

  },
data() {
  return {
   
  }
},
   filters:{
          imggl(img){
                if(img.includes(config.baimgurl)||img.includes(config.baimgurls)){
                  return img+'?imageMogr2/thumbnail/!50p'

                }
          }
    },
    computed:{
        
        // _id(){
        //   return this.$store.state.mkhuser.userInfo
        // }
    },
    mounted(){
       
        console.log(this.dx)

    }, 
    methods:{
      sc(_id,uid){
        // let {_id,author_id}=this.dx


         this.$emit('sc',_id,uid)       
        // console.log(_id,this.uid)
        // scfb({
        //     _id:_id,
        //     uid:this.uid
        // }).then(res=>{
        //   console.log(res)
          
        // })
      }
    }
}
</script>

<style scoped>
a{
  text-decoration: none;
  color: none;
  background: none;
}
.pl{
  margin: 0 20px 0 0;
}
/* // 超过width隐藏三个点... .zzz */
.zzz{
  width: 100px !important;      
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0 20px 0 0;
}
.aa{
  border-bottom: 1px solid rgb(220,220,220);
  margin: 0 0 15px 0;
  padding: 0 0 15px 0;
}
.sc{
  background: #d12d1a;
		color: #FFB619;
  font-size: 15px;
  text-align: center;
  padding: 8px 0;

}
.tp{
  width: 115px;
  height: 88px;
}
.fdd{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.tpd{
  display: flex;
  justify-content: space-between;
}
.bt{
  margin: 0 0 20px 0;
  font-size: 16px;
  width: 210px;
  -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    color: black;
}

.zz{
  margin: 10px 0 0 0;
  font-size: 10px;
  color: rgb(220,220,220);
  display: flex;
}
/* .zz span{
  margin: 0 8px 0 0;
} */
.tit{
  color: black;
  margin: 5px 5px 6px 0;
  font-size: 16px;
  -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tpp{
   width: 115px;
  height: 88px;
  margin: 0 3px 0 0;
}
.dw{
  position: fixed;
  left: 0;
  right: 0;
  top: 50px;
}
</style>